<ion-header id="cashHeader" [hidden]="showByLandscape">
  <ion-navbar>
    <ion-title>批量现金流试算</ion-title>
    <ion-buttons end>
      <!--<button ion-button (click)="setShowByLandscape(1)" [hidden]="listData.length === 0">全屏显示</button>-->
      <!--<button ion-button (click)="setShowByLandscape()" *ngIf="showByLandscape">切换竖屏</button>-->
    </ion-buttons>
  </ion-navbar>
  <!--<ion-item-divider id="headerDivider" color="light" class="setFontSize" (click)="setShowQueryCondition()">
    <ion-icon *ngIf="!showQueryCondition" name="add-circle" color="primary">&nbsp;</ion-icon>
    <ion-icon *ngIf="showQueryCondition" name="remove-circle" color="primary">&nbsp;</ion-icon>
    查询条件
  </ion-item-divider>-->
  <div id="headerDivider" class="item-inner setFontSize" (click)="setShowQueryCondition()">
    <div class="input-wrapper">
      <ion-label>&nbsp;
        <ion-icon *ngIf="!showQueryCondition" name="add-circle" color="primary">&nbsp;</ion-icon>
        <ion-icon *ngIf="showQueryCondition" name="remove-circle" color="primary">&nbsp;</ion-icon>
        查询条件&emsp;<ion-spinner *ngIf="showLoading" name="bubbles" class="loading_spinner"></ion-spinner>
      </ion-label>
    </div>
  </div>
</ion-header>
<ion-content id="circulateContent" class="funds">
  <ion-list *ngIf="showQueryCondition && !showByLandscape">
    <ion-item class="fundCode">
      <!--<ion-label>基金代码：</ion-label>-->
      <!--<ion-input placeholder="基金代码"></ion-input>-->
      <ion-row>
        <ion-col width-25 class="fundCodetext">
          基金代码：
        </ion-col>
        <ion-col class="fundCodetext textEllipsis">
          {{queryCondition.fund_code}}
        </ion-col>
        <ion-col class="fundBadge" col-1>
          <ion-badge item-end>{{selectedFund.length}}</ion-badge>
        </ion-col>
        <ion-col class="selectFundButton" col-2>
          <button ion-button small (click)="selectFund()">选择</button>
        </ion-col>
      </ion-row>
    </ion-item>
    <ion-item>
      <ion-label>开始日期：</ion-label>
      <ion-datetime displayFormat="YYYY-MM-DD" pickerFormat="YYYY-MM-DD" [(ngModel)]="queryCondition.startDate"
                    cancelText="取消" doneText="确定" max="{{maxStartDate}}">
      </ion-datetime>
    </ion-item>
    <ion-item>
      <ion-label>结束日期：</ion-label>
      <ion-datetime displayFormat="YYYY-MM-DD" pickerFormat="YYYY-MM-DD" [(ngModel)]="queryCondition.endDate"
                    cancelText="取消" doneText="确定" min="{{queryCondition.startDate}}">
      </ion-datetime>
    </ion-item>
    <ion-item class="dataStyle">
      <ion-label>报表样式:</ion-label>
      <ion-select [(ngModel)]="queryCondition.dataStyle" okText="完成" cancelText="取消">
        <!-- <ion-option value="10">货币基金现金流报表</ion-option>
        <ion-option value="20">现金资产比例监控报表</ion-option>
        <ion-option value="21">流动性新规监控报表</ion-option> -->
        <ion-option *ngFor="let opt of styleSheet" [value]="opt['vc_item_no']">{{opt['vc_item_name']}}</ion-option>
      </ion-select>
    </ion-item>
    <ion-item class="queryButton">
      <button ion-button color="primary" block (click)="search()" *ngIf="!showLoading">查询</button>
      <button ion-button color="primary" block (click)="search()" *ngIf="showLoading" [disabled]="true">查询中...</button>
    </ion-item>
  </ion-list>
  <ion-list class='gfoa-list'>
    <ion-item-divider class='list-no-more-tips' color="light" [hidden]="isLoadMore">暂无更多数据...</ion-item-divider>
  </ion-list>

  <div id="fundsDetailMsg" class="funds-detail-msg {{rotateClass}}">
    <!--<ion-grid>-->
    <ion-row responsive-sm id="dataRow">
      <ion-col id="fundLeft" col-5 class="funds-left {{funds_left_scroll_x}}" (ionScroll)="scrollHandler($event)">
        <ion-list [hidden]="listData.length === 0" id="gridLeft"
                  approxItemHeight="60px">
          <ion-item-divider>
            <p id="fundNameP" item-left>&nbsp;(基金代码)基金名称</p>
          </ion-item-divider>
          <!--<ion-item-divider *ngIf="!showByLandscape">
            <p id="fundNameP" item-right>(基金代码)基金名称</p>
          </ion-item-divider>-->
          <div class="GridLeft" *ngFor="let field of listData">
            <ion-item class="funds-name-item" (click)="expandField(field, '1', null)">
              <p item-left class="funds-name">
                <ion-icon name="arrow-dropright" *ngIf="!field.expand" color="primary"></ion-icon>
                <ion-icon name="arrow-dropdown" *ngIf="field.expand" color="primary"></ion-icon>
                  <span class="funds-layout-flex GridFundName set-fund-name-color">
                    ({{field.fundCode}}){{field.fundName}}
                     <!--<span class="set-color">
                       &nbsp;({{field.fundCode}}){{field.fundName}}</span>-->
                  </span>
              </p>
            </ion-item>
            <div *ngIf="field.expand">
              <div *ngFor="let data of field.datas">
                <ion-item class="funds-name-item" (click)="expandField(data, '2', field)">
                  <ion-icon name="arrow-forward" *ngIf="data.child.length > 0 && !data.expand"></ion-icon>
                  <ion-icon name="arrow-down" *ngIf="data.child.length > 0 && data.expand"></ion-icon>
                  <p item-left class="funds-name">
                    <span class="funds-layout-flex">
                      <span class="{{data.fieldNameColor}}">{{data.fieldName}}</span>
                    </span>
                  </p>
                </ion-item>
                <div *ngIf="data.child.length > 0 && data.expand">
                  <ion-item class="funds-name-item" *ngFor="let child of data.child">
                    <p item-left class="funds-name">
                    <span class="funds-layout-flex">
                      <span class="grayColor">{{child.fieldName}}</span>
                    </span>
                    </p>
                  </ion-item>
                </div>
              </div>
            </div>
          </div>
        </ion-list>
      </ion-col>

      <ion-col id="fundRight" col-7 class="funds-right {{funds_right_scroll_x}}">
        <ion-list [hidden]="listData.length === 0"
                  [virtualScroll]="items"
                  approxItemHeight="60px" id="gridRight">
          <ion-scroll id="rightScroll" scrollX="true" scrollY="true" class="item-wrap">
            <ion-item-divider id="GridTitle" class="fund-right-header">
              <p item-left class="odd_header" *ngFor="let date of selectedDate" [innerHTML]="date">
              </p>
            </ion-item-divider>
            <div *virtualItem="let temp" class="GridContent">
              <div *ngFor="let field of listData;let i=index">
                <ion-item class="GridContent_item">
                  <p item-left item-text class="funds-layout-flex set-bg-color GridContent_p"
                     *ngFor="let totalData of field.totalData">
                    <span class="{{totalData.color}}">{{totalData.data}}</span>
                  </p>
                </ion-item>
                <div *ngIf="field.expand">
                    <div *ngFor="let data of field.datas;">
                      <ion-item class="GridContent_item">
                        <p item-left item-text class="funds-layout-flex set-bg-color"
                           *ngFor="let fd of data.fieldDatas;let dataIndex = index;"
                           (click)="viewCashDetail(field, fd, dataIndex)">
                          <span class="{{fd.fieldColor}}">{{fd.en_balance | formatDataPipe: {accuracy: "0.01"} }}</span>
                        </p>
                      </ion-item>
                      <div *ngIf="data.child.length > 0 && data.expand">
                        <ion-item *ngFor="let child of data.child;" class="GridContent_item">
                          <p item-left item-text class="funds-layout-flex set-bg-color"
                             *ngFor="let fd of child.fieldDatas;let childIndex = index"
                             (click)="viewCashDetail(field, fd, childIndex)">
                            <span class="{{fd.fieldColor}}">{{fd.en_balance | formatDataPipe: {accuracy: "0.01"} }}</span>
                          </p>
                        </ion-item>
                      </div>
                    </div>
                </div>
              </div>
            </div>

            <!--<ion-item detail-none-->
                      <!--*virtualItem="let gridData">-->
              <!--<p item-left item-text class="funds-layout-flex set-bg-color"-->
                 <!--*ngFor="let totalData of gridData.totalData">-->
                <!--<span class="set-color">{{totalData}}</span>-->
              <!--</p>-->
            <!--</ion-item>-->
          </ion-scroll>
        </ion-list>
      </ion-col>

    </ion-row>
    <!--</ion-grid>-->
  </div>

</ion-content>
<div id="exitFullscreen" class="exitFullscreen" *ngIf="showByLandscape" (click)="setShowByLandscape(1)">
  <!--<ion-icon name="contract"></ion-icon>-->
  <!--<img src="assets/img/common/exitFullScreen.png" />-->
  <span>取消全屏</span>
</div>
<div class="enterFullscreen" *ngIf="!showByLandscape" (click)="setShowByLandscape(1)" [hidden]="listData.length === 0">
  <span>全屏显示</span>
</div>
